<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>${constants.getSystemName()}</title>
    <link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}"/>
    <style>
        .numberInfoSubTitle {
            color: rgba(0, 0, 0, .45);
            font-size: 14px;
            height: 22px;
            line-height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
        }

        .numberInfoValue {
            color: rgba(0, 0, 0, .85);
            font-size: 24px;
            margin-top: 10px;
            height: 32px;
            line-height: 32px;
        }

        .numberInfoSuffix {
            color: rgba(0, 0, 0, .65);
            font-size: 16px;
            font-style: normal;
            margin-left: 4px;
            line-height: 32px;
        }
    </style>
</head>

<body>

<!-- 加载动画，移除位置在common.js中 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-row layui-col-space12">

        <div class="layui-col-xs12 layui-col-md4">
            <div class="layui-card" style="">
                <div id="xse" style="height: 300px;margin-top: 20px;"></div>
            </div>
            <div class="layui-card">
                <div class="layui-card-body" style="height: 240px;overflow: hidden;">
                    <div id="hdqkyc" style="width: 100%;height: 260px;"></div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-body" style="height: 222px;overflow: hidden;">
                    <div id="hjxl" style="width: 100%;height: 280px;margin-top: -20px;"></div>
                </div>
            </div>
        </div>

        <!--<div class="layui-col-xs12 layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-body" style="height: 240px;overflow: hidden;">
                    <div id="hdqkyc" style="width: 100%;height: 260px;"></div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-body" style="height: 222px;overflow: hidden;">
                    <div id="hjxl" style="width: 100%;height: 280px;margin-top: -20px;"></div>
                </div>
            </div>
        </div>-->
    </div>

</div>

<!-- js部分 -->
@/* 加入contextPath属性和session超时的配置 */
<script type="text/javascript">
    var Feng = {
        ctxPath: "${ctxPath}",
        version: '${constants.getReleaseVersion()}'
    };
</script>

<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
<script src="${ctxPath}/assets/common/libs/echarts/echarts.min.js?v=${constants.getReleaseVersion()}"></script>
<script src="${ctxPath}/assets/common/libs/echarts/echartsTheme.js?v=${constants.getReleaseVersion()}"></script>

<script>
    layui.use(['layer', 'element','ax','func'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var $ax = layui.ax;
        var element = layui.element;

        var barChartX; var barChartY;
        var ajax = new $ax(Feng.ctxPath + "/eduCourseSelectionInfo/barchart", function (rsp) {
            console.log(rsp.data)
            var data = rsp.data;
            barChartX = data.x;
            barChartY = data.y;
        }, function (data) {
            Feng.error("数据查询失败!" + data.responseJSON.message + "!");
        });
        ajax.start();

        var roundData;
        var ajax = new $ax(Feng.ctxPath + "/eduStudentInfo/round", function (rsp) {
            console.log(rsp.data)
            roundData = rsp.data;
        }, function (data) {
            Feng.error("数据查询失败!" + data.responseJSON.message + "!");
        });
        ajax.start();

        var lineChartData;
        var ajax = new $ax(Feng.ctxPath + "/eduCourseSelectionInfo/linechart", function (rsp) {
            console.log(rsp.data)
            lineChartData = rsp.data;
        }, function (data) {
            Feng.error("数据查询失败!" + data.responseJSON.message + "!");
        });
        ajax.start();

        // 渲染活动情况预测
        var myCharts = echarts.init(document.getElementById('hdqkyc'), myEchartsTheme);
        var mData = lineChartData.sum;
        var mData1 = lineChartData.men;
        var mData2 = lineChartData.women;;
        var option = {
            title: {
                subtext: '出勤率',
                textStyle: {
                    color: '#000'
                }
            },
            tooltip: {
                trigger: "axis"
            },
            xAxis: [{
                type: "category",
                boundaryGap: !1,
                data: lineChartData.x
            }],
            yAxis: [{
                type: "value"
            }],
            series: [
                {
                    name: "男",
                    type: "line",
                    data: mData
                },
                {
                    name: "女",
                    type: "line",
                    data: mData1
                },
                {
                    name: "总",
                    type: "line",
                    data: mData2
                }
            ],
            color: ['#00EE00', '#FF9F7F','#FFD700']
        };
        myCharts.setOption(option);


        // 渲染券核效率图表
        var myCharts2 = echarts.init(document.getElementById('hjxl'), myEchartsTheme);
        var option2 = {
            title: {
                subtext: "男女比例"
            },
            series: [
                {
                    name: '男女比例',
                    type: 'pie',
                    data: roundData
                }
            ]
        };
        myCharts2.setOption(option2);

        // 渲染销售额图表
        var myCharts3 = echarts.init(document.getElementById('xse'), myEchartsTheme);
        var option3 = {
            title: {
                text: '缺勤排行',
                textStyle: {
                    color: '#000',
                    fontSize: 14
                }
            },
            tooltip: {},
            grid: {
                left: '0',
                right: '0',
                bottom: '0',
                containLabel: true
            },
            xAxis: {
                data: barChartX
            },
            yAxis: {},
            series: [{
                type: 'bar',
                data: barChartY,
                barMaxWidth: 45
            }]
        };
        myCharts3.setOption(option3);

    });
</script>
</body>

</html>